<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="/">
    <title>Home</title>
    <!-- for-mobile-apps -->
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="" name="keywords">
    <script type="application/x-javascript">
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!-- //for-mobile-apps -->
    <link href="css/bootstrap.css" media="all" rel="stylesheet" type="text/css">
    <link href="css/style.css" media="all" rel="stylesheet" type="text/css">
    <!-- font-awesome icons -->
    <link href="css/font-awesome.css" media="all" rel="stylesheet" type="text/css">
    <!-- //font-awesome icons -->
    <script src="js/jquery-1.11.1.min.js"></script>
    <link href="css/css" rel="stylesheet" type="text/css">
    <link href="css/null_03cc4d5da5c148f0b18b1622224c13f9.css" rel="stylesheet" type="text/css">
    <!-- start-smoth-scrolling -->
    <script src="js/move-top.js" type="text/javascript"></script>
    <script src="js/easing.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({scrollTop: $(this.hash).offset().top}, 1000);
            });
        });
    </script>
    <!-- start-smoth-scrolling -->
</head>
<body>
<!-- header -->
<div class="agileits_header">
    <div class="w3l_offers">
        <a href="shopping/list">今日特价!</a>
    </div>
    <div class="w3l_search">
        <form action="shopping/list" method="get">
            <input name="keywords" onblur="if (this.value == '') {this.value = 'Search a product...';}"
                   onfocus="this.value = '';" required type="text" value="Search a product...">
            <input type="submit" value=" " name="">
        </form>
    </div>

    <div class="product_list_header">
        <div style="cursor: pointer;">
            <span class="glyphicon glyphicon-shopping-cart my-cart-icon"><i
                    class="badge badge-notify my-cart-badge"></i></span>
        </div>
    </div>

    <div class="w3l_header_right">
        <ul>
            <li class="dropdown profile_details_drop">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i aria-hidden="true" class="fa fa-user"></i>
                    <span class="caret"></span>
                </a>
                <div class="mega-dropdown-menu">
                    <div class="w3ls_vegetables">
                        <ul class="dropdown-menu drp-mnu">
                            <li><a href="shopping/login">登录</a></li>
                            <li><a href="shopping/login">注册</a></li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="w3l_header_right1">
        <h2><a href="mail.html">Contact Us</a></h2>
    </div>
    <div class="clearfix"></div>
</div>
<!-- script-for sticky-nav -->
<script>
    $(document).ready(function () {
        var navoffeset = $(".agileits_header").offset().top;
        $(window).scroll(function () {
            var scrollpos = $(window).scrollTop();
            if (scrollpos >= navoffeset) {
                $(".agileits_header").addClass("fixed");
            } else {
                $(".agileits_header").removeClass("fixed");
            }
        });
    });
</script>
<!-- //script-for sticky-nav -->
<div class="logo_products">
    <div class="container">
        <div class="w3ls_logo_products_left">
            <h1><a href="index.html"><span>Grocery</span> Store</a></h1>
        </div>
        <div class="w3ls_logo_products_left1">
            <ul class="special_items">
                <li><a href="events.html">重要活动</a><i>/</i></li>
                <li><a href="about.html">关于我们</a><i>/</i></li>
                <li><a href="list.html">最佳优惠</a><i>/</i></li>
                <li><a href="services.html">服务项目</a></li>
            </ul>
        </div>
        <div class="w3ls_logo_products_left1">
            <ul class="phone_email">
                <li><i aria-hidden="true" class="fa fa-phone"></i>(+0123) 234 567</li>
                <li><i aria-hidden="true" class="fa fa-envelope-o"></i><a href="mailto:store@grocery.com">store@grocery.com</a>
                </li>
            </ul>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<!-- banner -->
<div class="banner">
    <div class="w3l_banner_nav_left">
        <nav class="navbar nav_bottom">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header nav_2">
                <button class="navbar-toggle collapsed navbar-toggle1" data-target="#bs-megadropdown-tabs"
                        data-toggle="collapse" type="button">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-megadropdown-tabs">
                <ul class="nav navbar-nav nav_1" id="categorylist">

                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </nav>
    </div>
    <div class="w3l_banner_nav_right">
        <section class="slider">
            <div class="flexslider">
                <ul class="slides">
                    <li>
                        <div class="w3l_banner_nav_right_banner">
                            <h3>Make your <span>food</span> with Spicy.</h3>
                            <div class="more">
                                <a class="button--saqui button--round-l button--text-thick" data-text="Shop now"
                                   href="list.html">Shop now</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="w3l_banner_nav_right_banner1">
                            <h3>Make your <span>food</span> with Spicy.</h3>
                            <div class="more">
                                <a class="button--saqui button--round-l button--text-thick" data-text="Shop now"
                                   href="list.html">Shop now</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="w3l_banner_nav_right_banner2">
                            <h3>upto <i>50%</i> off.</h3>
                            <div class="more">
                                <a class="button--saqui button--round-l button--text-thick" data-text="Shop now"
                                   href="list.html">Shop now</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </section>
        <!-- flexSlider -->
        <link href="css/flexslider.css" media="screen" property="" rel="stylesheet" type="text/css">
        <script defer src="js/jquery.flexslider.js"></script>
        <script type="text/javascript">
            $(window).load(function () {
                $('.flexslider').flexslider({
                    animation: "slide",
                    start: function (slider) {
                        $('body').removeClass('loading');
                    }
                });
            });
        </script>
        <!-- //flexSlider -->
    </div>
    <div class="clearfix"></div>
</div>
<!-- banner -->
<div class="banner_bottom">
    <div class="wthree_banner_bottom_left_grid_sub">
    </div>
    <div class="wthree_banner_bottom_left_grid_sub1">
        <div class="col-md-4 wthree_banner_bottom_left">
            <div class="wthree_banner_bottom_left_grid">
                <img alt=" " class="img-responsive" src="index/images/4.jpg">
                <div class="wthree_banner_bottom_left_grid_pos">
                    <h4>Discount Offer <span>25%</span></h4>
                </div>
            </div>
        </div>
        <div class="col-md-4 wthree_banner_bottom_left">
            <div class="wthree_banner_bottom_left_grid">
                <img alt=" " class="img-responsive" src="index/images/5.jpg">
                <div class="wthree_banner_btm_pos">
                    <h3>introducing <span>best store</span> for <i>groceries</i></h3>
                </div>
            </div>
        </div>
        <div class="col-md-4 wthree_banner_bottom_left">
            <div class="wthree_banner_bottom_left_grid">
                <img alt=" " class="img-responsive" src="index/images/6.jpg">
                <div class="wthree_banner_btm_pos1">
                    <h3>Save <span>Upto</span> $10</h3>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
</div>
<!-- top-brands -->
<div class="top-brands">
    <div class="container">
        <h3>Hot Offers</h3>
        <div class="agile_top_brands_grids">
            <div class="col-md-3 top_brand_left">

            </div>
        </div>
    </div>
</div>

<!--                <div class="hover14 column">-->
<!--                    <div class="agile_top_brand_left_grid">-->
<!--                        <div class="tag">-->
<!--                            <img alt=" " class="img-responsive" src="index/images/tag.png">-->
<!--                        </div>-->
<!--                        <div class="agile_top_brand_left_grid1">-->
<!--                            <figure>-->
<!--                                <div class="snipcart-item block">-->
<!--                                    <div class="snipcart-thumb">-->
<!--                                        <a href="product.html"><img alt=" " src="index/images/1.png" title=" "></a>-->
<!--                                        <p>fortune sunflower oil</p>-->
<!--                                        <h4>$7.99 <span>$10.00</span></h4>-->
<!--                                    </div>-->
<!--                                    <div class="snipcart-details top_brand_home_details">-->
<!--                                        <button class="btn btn-danger my-cart-btn hvr-sweep-to-right" data-id="1"-->
<!--                                                data-image="index/images/1.png" data-name="Fortune sunflower oil"-->
<!--                                                data-price="7.99" data-quantity="1" data-summary="summary 1">Add to Cart-->
<!--                                        </button>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </figure>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="col-md-3 top_brand_left">-->
<!--                <div class="hover14 column">-->
<!--                    <div class="agile_top_brand_left_grid">-->
<!--                        <div class="agile_top_brand_left_grid1">-->
<!--                            <figure>-->
<!--                                <div class="snipcart-item block">-->
<!--                                    <div class="snipcart-thumb">-->
<!--                                        <a href="product.html"><img alt=" " src="index/images/3.png" title=" "></a>-->
<!--                                        <p>basmati rise (5 Kg)</p>-->
<!--                                        <h4>$11.99 <span>$15.00</span></h4>-->
<!--                                    </div>-->
<!--                                    <div class="snipcart-details top_brand_home_details">-->
<!--                                        <button class="btn btn-danger my-cart-btn hvr-sweep-to-right" data-id="2"-->
<!--                                                data-image="index/images/3.png" data-name="Indian gate basmati rise"-->
<!--                                                data-price="11.99" data-quantity="1" data-summary="summary 2">Add to-->
<!--                                            Cart-->
<!--                                        </button>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </figure>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="col-md-3 top_brand_left">-->
<!--                <div class="hover14 column">-->
<!--                    <div class="agile_top_brand_left_grid">-->
<!--                        <div class="agile_top_brand_left_grid_pos">-->
<!--                            <img alt=" " class="img-responsive" src="index/images/offer.png">-->
<!--                        </div>-->
<!--                        <div class="agile_top_brand_left_grid1">-->
<!--                            <figure>-->
<!--                                <div class="snipcart-item block">-->
<!--                                    <div class="snipcart-thumb">-->
<!--                                        <a href="product.html"><img alt=" " class="img-responsive"-->
<!--                                                                    src="index/images/2.png"></a>-->
<!--                                        <p>Pepsi soft drink (2 Ltr)</p>-->
<!--                                        <h4>$8.00 <span>$10.00</span></h4>-->
<!--                                    </div>-->
<!--                                    <div class="snipcart-details top_brand_home_details">-->
<!--                                        <button class="btn btn-danger my-cart-btn hvr-sweep-to-right" data-id="3"-->
<!--                                                data-image="index/images/2.png" data-name="Pepsi soft drink bottles"-->
<!--                                                data-price="8.00" data-quantity="1" data-summary="summary 3">Add to Cart-->
<!--                                        </button>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </figure>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="col-md-3 top_brand_left">-->
<!--                <div class="hover14 column">-->
<!--                    <div class="agile_top_brand_left_grid">-->
<!--                        <div class="agile_top_brand_left_grid_pos">-->
<!--                            <img alt=" " class="img-responsive" src="index/images/offer.png">-->
<!--                        </div>-->
<!--                        <div class="agile_top_brand_left_grid1">-->
<!--                            <figure>-->
<!--                                <div class="snipcart-item block">-->
<!--                                    <div class="snipcart-thumb">-->
<!--                                        <a href="product.html"><img alt=" " class="img-responsive"-->
<!--                                                                    src="index/images/4.png"></a>-->
<!--                                        <p>dogs food (4 Kg)</p>-->
<!--                                        <h4>$9.00 <span>$11.00</span></h4>-->
<!--                                    </div>-->
<!--                                    <div class="snipcart-details top_brand_home_details">-->
<!--                                        <button class="btn btn-danger my-cart-btn hvr-sweep-to-right" data-id="4"-->
<!--                                                data-image="index/images/4.png" data-name="Dogs food" data-price="9.00"-->
<!--                                                data-quantity="1" data-summary="summary 4">Add to Cart-->
<!--                                        </button>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </figure>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="clearfix"></div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
<!-- //top-brands -->
<div class="tlinks">
    Collect from
    <a href="https://www.downdemo.com">网页模板</a>
</div>
<!-- fresh-vegetables -->
<div class="fresh-vegetables">
    <div class="container">
        <h3>Top Products</h3>
        <div class="w3l_fresh_vegetables_grids">
            <div class="col-md-3 w3l_fresh_vegetables_grid w3l_fresh_vegetables_grid_left">
                <div class="w3l_fresh_vegetables_grid2">
                    <ul>
                        <li><i aria-hidden="true" class="fa fa-check"></i><a href="list.html">All Brands</a></li>
                        <li><i aria-hidden="true" class="fa fa-check"></i><a href="vegetables.html">Vegetables</a></li>
                        <li><i aria-hidden="true" class="fa fa-check"></i><a href="vegetables.html">Fruits</a></li>
                        <li><i aria-hidden="true" class="fa fa-check"></i><a href="drinks.html">Juices</a></li>
                        <li><i aria-hidden="true" class="fa fa-check"></i><a href="pet.html">Pet Food</a></li>
                        <li><i aria-hidden="true" class="fa fa-check"></i><a href="bread.html">Bread &amp; Bakery</a>
                        </li>
                        <li><i aria-hidden="true" class="fa fa-check"></i><a href="household.html">Cleaning</a></li>
                        <li><i aria-hidden="true" class="fa fa-check"></i><a href="list.html">Spices</a></li>
                        <li><i aria-hidden="true" class="fa fa-check"></i><a href="list.html">Dry Fruits</a></li>
                        <li><i aria-hidden="true" class="fa fa-check"></i><a href="list.html">Dairy Products</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-9 w3l_fresh_vegetables_grid_right">
                <div class="col-md-4 w3l_fresh_vegetables_grid">
                    <div class="w3l_fresh_vegetables_grid1">
                        <img alt=" " class="img-responsive" src="index/images/8.jpg">
                    </div>
                </div>
                <div class="col-md-4 w3l_fresh_vegetables_grid">
                    <div class="w3l_fresh_vegetables_grid1">
                        <div class="w3l_fresh_vegetables_grid1_rel">
                            <img alt=" " class="img-responsive" src="index/images/7.jpg">
                            <div class="w3l_fresh_vegetables_grid1_rel_pos">
                                <div class="more m1">
                                    <a class="button--saqui button--round-l button--text-thick" data-text="Shop now"
                                       href="list.html">Shop now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="w3l_fresh_vegetables_grid1_bottom">
                        <img alt=" " class="img-responsive" src="index/images/10.jpg">
                        <div class="w3l_fresh_vegetables_grid1_bottom_pos">
                            <h5>Special Offers</h5>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 w3l_fresh_vegetables_grid">
                    <div class="w3l_fresh_vegetables_grid1">
                        <img alt=" " class="img-responsive" src="index/images/9.jpg">
                    </div>
                    <div class="w3l_fresh_vegetables_grid1_bottom">
                        <img alt=" " class="img-responsive" src="index/images/11.jpg">
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="agileinfo_move_text">
                    <div class="agileinfo_marquee">
                        <h4>get <span class="blink_me">25% off</span> on first order and also get gift voucher</h4>
                    </div>
                    <div class="agileinfo_breaking_news">
                        <span> </span>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!-- //fresh-vegetables -->
<!-- newsletter -->
<div class="newsletter">
    <div class="container">
        <div class="w3agile_newsletter_left">
            <h3>sign up for our newsletter</h3>
        </div>
        <div class="w3agile_newsletter_right">
            <form action="#" method="post">
                <input name="Email" onblur="if (this.value == '') {this.value = 'Email';}" onfocus="this.value = '';"
                       required type="email" value="Email">
                <input type="submit" value="subscribe now">
            </form>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<!-- //newsletter -->
<!-- footer -->
<div class="footer">
    <div class="container">
        <div class="col-md-3 w3_footer_grid">
            <h3>information</h3>
            <ul class="w3_footer_grid_list">
                <li><a href="events.html">Events</a></li>
                <li><a href="about.html">About Us</a></li>
                <li><a href="list.html">Best Deals</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="short-codes.html">Short Codes</a></li>
            </ul>
        </div>
        <div class="col-md-3 w3_footer_grid">
            <h3>policy info</h3>
            <ul class="w3_footer_grid_list">
                <li><a href="faqs.html">FAQ</a></li>
                <li><a href="privacy.html">privacy policy</a></li>
                <li><a href="privacy.html">terms of use</a></li>
            </ul>
        </div>
        <div class="col-md-3 w3_footer_grid">
            <h3>what in stores</h3>
            <ul class="w3_footer_grid_list">
                <li><a href="pet.html">Pet Food</a></li>
                <li><a href="frozen.html">Frozen Snacks</a></li>
                <li><a href="kitchen.html">Kitchen</a></li>
                <li><a href="list.html">Branded Foods</a></li>
                <li><a href="household.html">Households</a></li>
            </ul>
        </div>
        <div class="col-md-3 w3_footer_grid">
            <h3>twitter posts</h3>
            <ul class="w3_footer_grid_list1">
                <li>
                    <label aria-hidden="true" class="fa fa-twitter"></label>
                    <i>01 day ago</i>
                    <span>Non numquam <a href="#">http://sd.ds/13jklf#</a> eius modi tempora incidunt ut labore et <a
                            href="#">http://sd.ds/1389kjklf#</a> quo nulla.</span>
                </li>
                <li>
                    <label aria-hidden="true" class="fa fa-twitter"></label>
                    <i>02 day ago</i>
                    <span>Con numquam <a href="#">http://fd.uf/56hfg#</a> eius modi tempora incidunt ut labore et <a
                            href="#">http://fd.uf/56hfg#</a> quo nulla.</span>
                </li>
            </ul>
        </div>
        <div class="clearfix"></div>
        <div class="agile_footer_grids">
            <div class="col-md-3 w3_footer_grid agile_footer_grids_w3_footer">
                <div class="w3_footer_grid_bottom">
                    <h4>100% secure payments</h4>
                    <img alt=" " class="img-responsive" src="index/images/card.png">
                </div>
            </div>
            <div class="col-md-3 w3_footer_grid agile_footer_grids_w3_footer">
                <div class="w3_footer_grid_bottom">
                    <h5>connect with us</h5>
                    <ul class="agileits_social_icons">
                        <li><a class="facebook" href="#"><i aria-hidden="true" class="fa fa-facebook"></i></a></li>
                        <li><a class="twitter" href="#"><i aria-hidden="true" class="fa fa-twitter"></i></a></li>
                        <li><a class="google" href="#"><i aria-hidden="true" class="fa fa-google-plus"></i></a></li>
                        <li><a class="instagram" href="#"><i aria-hidden="true" class="fa fa-instagram"></i></a></li>
                        <li><a class="dribbble" href="#"><i aria-hidden="true" class="fa fa-dribbble"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="wthree_footer_copy">
            <p>Copyright © 2016.Company name All rights reserved.More Templates <a href="https://www.downdemo.com"
                                                                                   target="_blank"
                                                                                   title="网站模板">网站模板</a> -
                Collect from <a href="https://www.downdemo.com" target="_blank" title="网页模板">网页模板</a></p>
        </div>
    </div>
</div>
<!-- //footer -->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        $(".dropdown").hover(
            function () {
                $('.dropdown-menu', this).stop(true, true).slideDown("fast");
                $(this).toggleClass('open');
            },
            function () {
                $('.dropdown-menu', this).stop(true, true).slideUp("fast");
                $(this).toggleClass('open');
            }
        );
    });
</script>
<!-- here stars scrolling icon -->
<script type="text/javascript">
    $(document).ready(function () {
        $().UItoTop({easingType: 'easeOutQuart'});
    });
</script>
<!-- //here ends scrolling icon -->
<script src="js/jquery.mycart.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        var goToCartIcon = function ($addTocartBtn) {
            var $cartIcon = $(".my-cart-icon");
            var $image = $('<img width="30px" height="30px" src="' + $addTocartBtn.data("image") + '"/>').css({
                "position": "fixed",
                "z-index": "999"
            });
            $addTocartBtn.prepend($image);
            var position = $cartIcon.position();
            $image.animate({
                // Animate the image to the cart icon
            }, 500, "linear", function () {
                $image.remove();
            });
        };

        $('.my-cart-btn').myCart({
            classCartIcon: 'my-cart-icon',
            classCartBadge: 'my-cart-badge',
            affixCartIcon: true,
            checkoutCart: function (products) {
                $.each(products, function () {
                    console.log(this);
                });
            },
            clickOnAddToCart: function ($addTocart) {
                goToCartIcon($addTocart);
            },
            getDiscountPrice: function (products) {
                var total = 0;
                $.each(products, function () {
                    total += this.quantity * this.price;
                });
                return total * 1;
            }
        });
    });
</script>
<script src="layui/layui.all.js"></script>

<script id="categoryitem" type="text/html">
    <li class="dropdown mega-dropdown active" >
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span></a>
        <div class="dropdown-menu mega-dropdown-menu w3ls_vegetables_menu" >
            <div class="w3ls_vegetables" childrenlist>

            </div>
        </div>
    </li>
</script>

<script id="categorychild" type="text/html">
        <li><a href="#">
            <span></span>
        </a></li>
</script>

<script>
    const $ = layui.$;
    $.ajax({
        url: 'category/getchildren',
        data: {id: -1},
        success: function (result) {
            for (let i = 0; i < result.length; i++) {
                let item = $("#categoryitem").text();
                let $item=$(item);
                $item.children('a.dropdown-toggle').text(result[i].name);
                let $childrenlist=$item.find("[childrenlist]");
                $.ajax({
                    url: 'category/getchildren',
                    data: {id:result[i].id},
                    async: false,
                    success: function(res){
                        let $ul=$('<ul></ul>');
                        for(let i=0;i<res.length;i++){
                            let childtext=$("#categorychild").text();
                            let $child=$(childtext);
                            $child.find('a').attr('href','shopping/list?categoryid='+res[i].id);
                            $child.find("span").text(res[i].name);
                            $child.find("img").attr("src",res[i].imgurl);
                            $ul.append($child);
                        }
                        if($ul.children().length > 0){
                            $childrenlist.append($ul);
                        }
                    }
                })
                $("#categorylist").append($item);
            }
        }
    });

</script>
<script type="text/html" id="productitem">
    <div class="col-md-3 top_brand_left">
        <div class="hover14 column">
            <div class="agile_top_brand_left_grid">
                <div class="agile_top_brand_left_grid1">
                    <figure>
                        <div class="snipcart-item block">
                            <div class="snipcart-thumb">
                                <a href="product.html"><img alt=" " src="index/images/3.png" title=" "></a>
                                <p>basmati rise (5 Kg)</p>
                                <h4>$11.99 <span>$15.00</span></h4>
                            </div>
                            <div class="snipcart-details top_brand_home_details">
                                <button class="btn btn-danger my-cart-btn hvr-sweep-to-right" data-id="2"
                                        data-image="index/images/3.png" data-name="Indian gate basmati rise"
                                        data-price="11.99" data-quantity="1" data-summary="summary 2">
                                    Add to Cart
                                </button>
                            </div>
                        </div>
                    </figure>
                </div>
            </div>
        </div>
    </div>
</script>
<script th:inline="javascript">
    const categoryid = /*[[${categoryid}]]*/;
    const keywords = /*[[${keywords}]]*/;
    var data = {};

    if (categoryid) {
        data.categoryid = categoryid;
    }
    if (keywords) {
        data.name = keywords;
    }
    $.ajax({
        url: 'product/list',
        data: data,
        success: function (result) {
            console.log(result); // 调试：检查返回的数据
            let container = $('.col-md-3 top_brand_left');
            container.empty();
            let data = result.data;
            for (let i = 0; i < data.length; i++) {
                let itemdata = data[i];
                let itemtext = $("#productitem").text();
                let $item=$(itemtext);
                $item.find('.snipcart-thumb a').attr('href', 'shopping/product?id='+itemdata.id);
                $item.find('.snipcart-thumb img').attr('src', itemdata.image);
                $item.find('.snipcart-thumb p').text(itemdata.name);
                $item.find('.snipcart-thumb h4').text(itemdata.price);
                $item.find('.snipcart-thumb h4 span').text(itemdata.oldprice);
                $item.find('.snipcart-details button').attr('data-id', itemdata.id);
                $item.find('.snipcart-details button').attr('data-name', itemdata.name);
                $item.find('.snipcart-details button').attr('data-price', itemdata.price);
                $item.find('.snipcart-details button').attr('data-image', itemdata.image);
                $(".col-md-3 top_brand_left").append($item);
            }

            $(".my-cart-btn").click(function(){
                let productid = $(this).attr('data-id');
                $.ajax({
                    url:"cart/add",
                    data:{productid:productid},
                    success:function(result){
                        if(result.code==401){
                            layer.msg(result.msg,{icon:2});
                            setTimeout(function(){
                                location.href="shopping/login";
                            },2000);
                        }else{
                            layer.msg("已加入购物车",{icon: 1,time:1800});
                        }

                    }
                })

            });
        },
        error: function (xhr, status, error) {
            console.error('请求失败:', error);
        }

    });
</script>
</body>
</html>